<template>
  <div>
    <div id="shMap"></div>
  </div>
</template>

<script>
  // import JSON from './shanghai.json';//(手动修改过的数据)
  let salesNum = 1300
  let salesMoney = 1800
  export default {
    name: 'ShangHaiMap',
    data(){
      return{
        salesNum,
        salesMoney,
        /*mapOption: {
          backgroundColor: '', //背景颜色
          title: {
            text: '车信盟',
            subtext: '上海地图',
            color: '#fff',
            x:'left',
          },
          // 提示框，鼠标移入
          tooltip:{
            show:true, //鼠标移入是否触发数据
            trigger: 'item', //出发方式
            formatter:'{b}：{c}'
          },
          geo: {
            show: true,
            map: '上海',
            label: {
              show: false
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'transparent',
                borderWidth: 4, //设置外层边框
                borderColor:'#f8911b',
              },
              emphasis: {
                show: false,
                // areaColor: '#01215c'
              }
            }
          },
          //配置地图的数据，并且显示
          series:[
            {
              name:'地图',
              type: 'map',  //地图种类
              mapType: '上海', //地图类型。
              roam: false,
              showLegendSymbol:true,
              itemStyle: {
                normal: {
                  areaColor: '#000',
                  borderColor: '#a18a3a',
                  borderWidth: 1
                },
                emphasis: {
                  show: false,
                  areaColor: null
                }
              },

              data:[
                {name: '浦东新区',value: Math.round(Math.random()*500)},
                {name: '崇明区',value: Math.round(Math.random()*500)},
                {name: '宝山区',value: Math.round(Math.random()*500)},
                {name: '奉贤区',value: Math.round(Math.random()*500)},
                {name: '闵行区',value: Math.round(Math.random()*500)},
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },
          ],

        }*/
        /*mapOption: {
          /!*title : {
            text: '车销量',
            // subtext: '纯属虚构',
            left: 'left',
            textStyle: {
              color: '#fff'
            }
          },*!/
          grid: {
            bottom: 600,
            height: '100' ,
          },
          tooltip : {
            trigger: 'item',
            formatter: '{b}: {c}',
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   data:['总量'],
          //   textStyle: {
          //     fontSize: 12,
          //     color: '#fff'
          //   }
          // },
          visualMap: {
            min: 10,
            max: 1500,
            right: 'right',
            bottom: 'bottom',
            // text:['最多','最少'],           // 文本，默认为数值文本
            textStyle: {
              fontSize: 12,
              color: '#fff'
            },
            calculable : true,
            // 定义在选中范围中的视觉元素
            inRange: {
              // 图元的颜色
              color: ['#ffa502', '#7bed9f', '#ff6348', '#5352ed']
              // color: ['#ffa502','#5352ed']
            }
          },
          /!*toolbox: {
            show: true,
            orient : 'vertical',
            left: 'right',
            top: 'center',
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },*!/
          geo: {
            show: true,
            map: '上海',
            aspectScale: 0.75, //长宽比
            label: {
              show: false
            },
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#7bed9f' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#1e90ff'  // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                },
                // shadowColor:'rgb(58,115,192)',
                shadowColor:'#57606f',
                shadowOffsetX: -8,
                shadowOffsetY: 8,
                opacity: 0.5,
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green',
                label: {
                  show: false
                }
              }
            },
          },
          series : [
            {
              // name: '总量',
              type: 'map',
              mapType: '上海',
              roam: false,
              zoom: 1.2,
              itemStyle: {
                normal: {
                  borderColor: 'rgb(147, 235, 248)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: '#09132c' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#274d68'  // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                  },
                },
                emphasis: {
                  areaColor: 'rgb(46,229,206)',
                     // shadowColor: 'rgb(12,25,50)',
                  borderWidth: 0.1
                }
              },
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },
              data:[
                {name: '浦东新区',value: Math.round(Math.random()*1500)},
                {name: '崇明区',value: Math.round(Math.random()*1500)},
                {name: '宝山区',value: Math.round(Math.random()*1500)},
                {name: '奉贤区',value: Math.round(Math.random()*1500)},
                {name: '闵行区',value: Math.round(Math.random()*1500)},
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },
            /!*{
              name: '传统车',
              type: 'map',
              mapType: '上海',
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },*!/
          ]
        }*/
        /*mapOption: {
          title: [
            {
              id: 'statistic',
              text: "数据监测情况",
              left: '3%',
              top: '5%',
              textStyle: {
                color: '#fff',
                fontSize: 15
              }
            },
            {
              // text: "最大值：" + datamax[n],
              text: "当年累计销售量：" + salesNum,
              left: '3%',
              top: '10%',
              textStyle: {
                color: '#ffffff',
                fontSize: 15
              }
            },
            {
              text: "当年累计销售额：" + salesMoney,
              left: '3%',
              top: '15%',
              textStyle: {
                color: '#ffffff',
                fontSize: 15
              }
            },
          ],
          tooltip : {
            trigger: 'item',
            formatter: '{b}: {c}',
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   data:['总量'],
          //   textStyle: {
          //     fontSize: 12,
          //     color: '#fff'
          //   }
          // },
          visualMap: {
            min: 10,
            max: 1500,
            right: 'right',
            bottom: 'bottom',
            // text:['最多','最少'],           // 文本，默认为数值文本
            textStyle: {
              fontSize: 12,
              color: '#fff'
            },
            calculable : true,
            // 定义在选中范围中的视觉元素
            inRange: {
              // 图元的颜色
              // color: ['#ffa502', '#7bed9f', '#ff6348', '#5352ed']
              // color: ['#ffa502','#5352ed']
              // color: ['#2E98CA', '#24CFF4', '#fca55f']
              color: ['#176fc2', '#24CFF4', '#fca55f']
            }
          },
          /!*toolbox: {
            show: true,
            orient : 'vertical',
            left: 'right',
            top: 'center',
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },*!/
          geo: {
            show: true,
            map: '上海',
            aspectScale: 1, //长宽比
            label: {
              show: false
            },
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                shadowColor:'#747d8c',//阴影颜色
                shadowOffsetX: -5,
                shadowOffsetY: 5,
                opacity: 0.5,
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green',
                label: {
                  show: false
                }
              }
            },
          },
          series : [
            {
              // name: '总量',
              type: 'map',
              mapType: '上海',
              aspectScale: 1, //长宽比
              roam: false,
              zoom: 1.2,
              itemStyle: {
                normal: {
                  areaColor: '#24CFF4',
                  borderColor: '#53D9FF',
                  // borderWidth: 1.3,
                  shadowBlur: 0,
                  shadowColor: 'rgb(58,115,192)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
                emphasis: {
                  areaColor: '#8dd7fc',
                  borderWidth: 1.6,
                  shadowBlur: 15,
                }

              },
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: 'rgb(183,185,14)'
                  }
                }
              },
              data:[
                {name: '浦东新区',value: Math.round(Math.random()*1500)},
                {name: '崇明区',value: Math.round(Math.random()*1500)},
                {name: '宝山区',value: Math.round(Math.random()*1500)},
                {name: '奉贤区',value: Math.round(Math.random()*1500)},
                {name: '闵行区',value: Math.round(Math.random()*1500)},
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },
            /!*{
              name: '传统车',
              type: 'map',
              mapType: '上海',
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },*!/
          ]
        }*/
        /*mapOption: {
          /!*title : {
            text: '车销量',
            // subtext: '纯属虚构',
            left: 'left',
            textStyle: {
              color: '#fff'
            }
          },*!/
          tooltip : {
            trigger: 'item',
            formatter: '{b}: {c}',
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   data:['总量'],
          //   textStyle: {
          //     fontSize: 12,
          //     color: '#fff'
          //   }
          // },
          visualMap: {
            min: 10,
            max: 1500,
            right: 'right',
            bottom: 'bottom',
            // text:['最多','最少'],           // 文本，默认为数值文本
            textStyle: {
              fontSize: 12,
              color: '#fff'
            },
            calculable : true,
            // 定义在选中范围中的视觉元素
            inRange: {
              // 图元的颜色
              // color: ['#ffa502', '#7bed9f', '#ff6348', '#5352ed']
              color: ['#296C86','#82DDFF','#52AFD1']
              // color: ['#24CFF4', '#2E98CA', '#1E62AC']
            }
          },
          /!*toolbox: {
            show: true,
            orient : 'vertical',
            left: 'right',
            top: 'center',
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },*!/
          geo: {
            show: true,
            map: '上海',
            aspectScale: 1, //长宽比
            label: {
              show: false
            },
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                shadowColor:'#747d8c',//阴影颜色
                shadowOffsetX: -8,
                shadowOffsetY: 8,
              },
            },
          },
          series : [
            {
              // name: '总量',
              type: 'map',
              mapType: '上海',
              aspectScale: 1, //长宽比
              roam: false,
              zoom: 1.2,
              itemStyle: {
                normal: {
                  // areaColor: 'red',
                  borderColor: '#286B85',
                  borderWidth: 0.5,
                  shadowBlur: 5,
                  shadowColor: '#83DCFF',
                  shadowOffsetX: 7,
                  shadowOffsetY: 6,
                },
                emphasis: {//鼠标移上去地图板块颜色
                  areaColor: '#24CFF4',
                  borderWidth: 0.5,
                  shadowBlur: 10,
                }

              },
              label: {
                normal: { // 地图板块名称颜色
                  show: false,
                  textStyle: {
                    color: 'blue'
                  }
                },
                emphasis: { //鼠标移上去地图板块名称的颜色
                  textStyle: {
                    color: '#f00'
                  }
                }
              },
              data:[
                {name: '浦东新区',value: Math.round(Math.random()*1500)},
                {name: '崇明区',value: Math.round(Math.random()*1500)},
                {name: '宝山区',value: Math.round(Math.random()*1500)},
                {name: '奉贤区',value: Math.round(Math.random()*1500)},
                {name: '闵行区',value: Math.round(Math.random()*1500)},
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },
            /!*{
              name: '传统车',
              type: 'map',
              mapType: '上海',
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },*!/
          ]
        }*/
        mapOption: {
          title: [
            {
              id: 'statistic',
              text: "数据监测情况",
              left: '3%',
              top: '5%',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            {
              // text: "最大值：" + datamax[n],
              text: "当年累计销售量：" + salesNum + '台',
              left: '3%',
              top: '10%',
              textStyle: {
                color: '#ffffff',
                fontSize: 12
              }
            },
            {
              text: "当年累计销售额：" + salesMoney + '万元',
              left: '3%',
              top: '15%',
              textStyle: {
                color: '#ffffff',
                fontSize: 12
              }
            },
          ],
          tooltip : {
            trigger: 'item',
            formatter: '{b}: {c}',
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left',
          //   data:['总量'],
          //   textStyle: {
          //     fontSize: 12,
          //     color: '#fff'
          //   }
          // },
          visualMap: {
            min: 10,
            max: 1500,
            right: 'right',
            bottom: 'bottom',
            // text:['最多','最少'],           // 文本，默认为数值文本
            textStyle: {
              fontSize: 12,
              color: '#fff'
            },
            calculable : true,
            // 定义在选中范围中的视觉元素
            inRange: {
              // 图元的颜色
              // color: ['#176fc2', '#24CFF4', '#fca55f']

              // color: ['#ff6d1b', '#fca55f', '#124d9a','#10315f', '#176fc2', '#24B6E2']

              color: [ '#10315f', '#1a82d7', '#fcaf6b','#ff6d1b']
            }
          },
          /*toolbox: {
            show: true,
            orient : 'vertical',
            left: 'right',
            top: 'center',
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },*/
          geo: {
            show: true,
            map: '上海',
            aspectScale: 1, //长宽比
            label: {
              show: false
            },
            roam: false,
            zoom: 1.2,
            itemStyle: {
              normal: {
                // areaColor: '#24CFF4',
                areaColor: 'transparent',
                borderColor: '#53D9FF',
                borderWidth: 2.3, //设置外层边框
                shadowBlur: 8,
                shadowColor: '#8dd7fc',
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
              },
              emphasis: {
                areaColor: '#8dd7fc',
                borderWidth: 1.6,
                shadowBlur: 25,
              }

            },
          },
          series : [
            {
              // name: '总量',
              type: 'map',
              mapType: '上海',
              aspectScale: 1, //长宽比
              roam: false,
              zoom: 1.2,
              itemStyle: {
                normal: {
                  areaColor: '#24CFF4',
                  borderColor: '#53D9FF',
                  // opacity: 0.8,
                },
                emphasis: {
                  areaColor: '#47272a',
                  borderWidth: 1.6,
                  shadowBlur: 15,
                }

              },
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#1DE9B6'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#a4fff9'
                  }
                }
              },
              data:[
                {name: '浦东新区',value: Math.round(Math.random()*1500)},
                {name: '崇明区',value: Math.round(Math.random()*1500)},
                {name: '宝山区',value: Math.round(Math.random()*1500)},
                {name: '奉贤区',value: Math.round(Math.random()*1500)},
                {name: '闵行区',value: Math.round(Math.random()*1500)},
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },
            /*{
              name: '传统车',
              type: 'map',
              mapType: '上海',
              roam: false,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data:[
                {name: '嘉定区',value: Math.round(Math.random()*500)},
                {name: '普陀区',value: Math.round(Math.random()*500)},
                {name: '徐汇区',value: Math.round(Math.random()*500)},
                {name: '青浦区',value: Math.round(Math.random()*2500)},
                {name: '松江区',value: Math.round(Math.random()*500)},
                {name: '金山区',value: Math.round(Math.random()*2500)},
                {name: '杨浦区',value: Math.round(Math.random()*500)},
                {name: '静安区',value: Math.round(Math.random()*2500)},
                {name: '长宁区',value: Math.round(Math.random()*500)},
                {name: '虹口区',value: Math.round(Math.random()*500)},
                {name: '黄浦区',value: Math.round(Math.random()*500)},
              ],
            },*/
          ]
        }
      }
    },
    mounted(){
      this.drawLine()
    },
    methods: {
      drawLine(){
        let shMap = this.$echarts.init(document.getElementById('shMap'))
        shMap.setOption(this.mapOption);
        let sizeFun = function () {
          shMap.resize()
        }
        window.addEventListener('resize', sizeFun )
      }
    }
  }
</script>

<style scoped>
  #shMap {
    width: 100%;
    /*height: 445px;*/
    height: 47vh;
  }
</style>